<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Landing Page | Amaze UI Example</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="alternate icon" type="image/png" href="assets/i/favicon.png">
    <link rel="stylesheet" href="static/assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="static/assets/css/index.css">
    <style>
        .get {
            background: #1E5B94;
            color: #fff;
            text-align: center;
            padding: 100px 0;
        }

        .get-title {
            font-size: 200%;
            border: 2px solid #fff;
            padding: 5px;
            display: inline-block;
        }

        .get-btn {
            background: #fff;
        }

        .detail {
            background: #fff;
        }

        .detail-h2 {
            text-align: center;
            font-size: 150%;
            margin: 40px 0;
        }

        .detail-h3 {
            color: #1f8dd6;
        }

        .detail-p {
            color: #7f8c8d;
        }

        .detail-mb {
            margin-bottom: 30px;
        }

        .hope {
            background: #0bb59b;
            padding: 50px 0;
        }

        .hope-img {
            text-align: center;
        }

        .hope-hr {
            border-color: #149C88;
        }

        .hope-title {
            font-size: 140%;
        }

        .about {
            background: #fff;
            padding: 40px 0;
            color: #7f8c8d;
        }

        .about-color {
            color: #34495e;
        }

        .about-title {
            font-size: 180%;
            padding: 30px 0 50px 0;
            text-align: center;
        }

        .footer p {
            color: #7f8c8d;
            margin: 0;
            padding: 15px 0;
            text-align: center;
            background: #2d3e50;
        }
    </style>
</head>
<body>

<header class="am-topbar am-topbar-fixed-top">
    <div class="am-container">
        <h1 class="am-topbar-brand">
            <a href="#">BookFlow</a>
        </h1>

        <div class="am-collapse am-topbar-collapse" id="collapse-head">
            <ul class="am-nav am-nav-pills am-topbar-nav">
                <li class="am-active"><a href="#">推荐</a></li>
                <li><a href="#">发现</a></li>
                <li><a href="#">我的</a></li>
                <li><a href="#">朋友</a></li>
            </ul>


            <ul class="am-nav am-navbar-nav am-navbar-right">
                <li class="hidden-xs am-hide-sm-only">
                    <form role="search" class="app-search">
                        <input type="text" placeholder="Search..." class="form-control">
                        <!--button class="am-icon-search"></button-->
                        <a href=""><img src="static/assets/i/search.png"></a>
                    </form>
                </li>
            </ul>

            <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list tpl-header-list"
                style="margin-top: 0;">
                <li class="am-dropdown" data-am-dropdown data-am-dropdown-toggle>
                    <a class="am-dropdown-toggle tpl-header-list-link" href="javascript:;">
                        <span class="am-icon-bell-o"></span> 提醒 <span
                            class="am-badge tpl-badge-success am-round">5</span></span>
                    </a>
                    <ul class="am-dropdown-content tpl-dropdown-content">
                        <li class="tpl-dropdown-content-external">
                            <h3>你有 <span class="tpl-color-success">5</span> 条提醒</h3><a href="###">全部</a></li>
                        <li class="tpl-dropdown-list-bdbc"><a href="#" class="tpl-dropdown-list-fl"><span
                                class="am-icon-btn am-icon-plus tpl-dropdown-ico-btn-size tpl-badge-success"></span>
                            【预览模块】移动端 查看时 手机、电脑框隐藏。</a>
                            <span class="tpl-dropdown-list-fr">3小时前</span>
                        </li>
                        <li class="tpl-dropdown-list-bdbc"><a href="#" class="tpl-dropdown-list-fl"><span
                                class="am-icon-btn am-icon-check tpl-dropdown-ico-btn-size tpl-badge-danger"></span>
                            移动端，导航条下边距处理</a>
                            <span class="tpl-dropdown-list-fr">15分钟前</span>
                        </li>
                        <li class="tpl-dropdown-list-bdbc"><a href="#" class="tpl-dropdown-list-fl"><span
                                class="am-icon-btn am-icon-bell-o tpl-dropdown-ico-btn-size tpl-badge-warning"></span>
                            追加统计代码</a>
                            <span class="tpl-dropdown-list-fr">2天前</span>
                        </li>
                    </ul>
                </li>
                <li class="am-dropdown" data-am-dropdown data-am-dropdown-toggle>
                    <a class="am-dropdown-toggle tpl-header-list-link" href="javascript:;">
                        <span class="am-icon-comment-o"></span> 消息 <span
                            class="am-badge tpl-badge-danger am-round">9</span></span>
                    </a>
                    <ul class="am-dropdown-content tpl-dropdown-content">
                        <li class="tpl-dropdown-content-external">
                            <h3>你有 <span class="tpl-color-danger">9</span> 条新消息</h3><a href="###">全部</a></li>
                        <li>
                            <a href="#" class="tpl-dropdown-content-message">
                                <span class="tpl-dropdown-content-photo">
                      <img src="static/assets/i/user02.png" alt=""> </span>
                                <span class="tpl-dropdown-content-subject">
                      <span class="tpl-dropdown-content-from"> 禁言小张 </span>
                                <span class="tpl-dropdown-content-time">10分钟前 </span>
                                </span>
                                <span class="tpl-dropdown-content-font"> Amaze UI 的诞生，依托于 GitHub 及其他技术社区上一些优秀的资源；Amaze UI 的成长，则离不开用户的支持。 </span>
                            </a>
                            <a href="#" class="tpl-dropdown-content-message">
                                <span class="tpl-dropdown-content-photo">
                      <img src="static/assets/i/user03.png" alt=""> </span>
                                <span class="tpl-dropdown-content-subject">
                      <span class="tpl-dropdown-content-from"> Steam </span>
                                <span class="tpl-dropdown-content-time">18分钟前</span>
                                </span>
                                <span class="tpl-dropdown-content-font"> 为了能最准确的传达所描述的问题， 建议你在反馈时附上演示，方便我们理解。 </span>
                            </a>
                        </li>

                    </ul>
                </li>


                <li class="am-dropdown dropbar" data-am-dropdown>
                    <a class="am-dropdown-toggle tpl-header-list-link" data-am-dropdown-toggle href="javascript:;">
                        <span class="tpl-header-list-user-nick">用户</span>
                        <span class="tpl-header-list-user-ico"> <img src="static/assets/i/user.png"></span>
                    </a>
                    <ul class="am-dropdown-content">
                        <li><a href="#"><span class="am-icon-bell"></span> 资料</a></li>
                        <li><a href="#"><span class="am-icon-cog"></span> 设置</a></li>
                        <li><a href="#"><span class="am-icon-power-off"></span> 退出</a></li>
                    </ul>
                </li>

            </ul>

            <!--li class="am-dropdown dropbar" data-am-dropdown >
                <a class="am-dropdown-toggle tpl-header-list-link" data-am-dropdown-toggle href="javascript:;">
                    <span class="tpl-header-list-user-nick">用户</span>
                    <span class="tpl-header-list-user-ico"> <img src="assets/i/user.png"></span>
                </a>
                <ul class="am-dropdown-content">
                    <li><a href="#"><span class="am-icon-bell"></span> 资料</a></li>
                    <li><a href="#"><span class="am-icon-cog"></span> 设置</a></li>
                    <li><a href="#"><span class="am-icon-power-off"></span> 退出</a></li>
                </ul>
            </li-->


        </div>

    </div>

</header>

<div class="get" style="background-image: url(static/assets/i/index.jpg); background-size: cover;">
    <div class="am-g">
        <div class="am-u-lg-12">
            <h1 class="get-title">漂流书单</h1>

            <p>
                期待你的参与，共同打造一个书单交流互动的平台
            </p>

            <p>
                <a href="http://amazeui.org" class="am-btn am-btn-sm get-btn">获取新get技能√</a>
            </p>
        </div>
    </div>
</div>

<div style="padding-left: 10%; padding-right: 10%;">
    <div class="you-like">
        <div class="s-bar">推荐
            <a class="am-badge am-badge-danger am-round">小清新</a>
            <a class="am-badge am-badge-danger am-round">文艺范</a>
            <a class="i-load-more-item-shadow" href="#"><i class="am-icon-refresh am-icon-fw"></i>换一组</a>
        </div>

        <div class="s-content" style="border-top: 1px solid #E8EEF2;">
            <ul data-am-widget="gallery" class="am-gallery am-avg-sm-2 am-avg-lg-4 am-avg-md-3 am-gallery-default">
                <li style="float: left; width: 25%">
                    <div class="am-gallery-item am_list_block">
                        <a href="###" class="am_img_bg">
                            <img src="static/assets/i/01.jpg"/>
                        </a>

                        <div class="am_listimg_info"><span class="am-icon-heart"> 132</span><span
                                class="am-icon-comments"> 67</span><span class="am_imglist_time">15分钟前</span></div>

                    </div>
                    <a class="am_imglist_user"><span class="am_imglist_user_ico"><img src="static/assets/i/kj.png"
                                                                                      alt=""></span><span
                            class="am_imglist_user_font">路见不平Eason吼</span></a>
                </li>

                <li style="float: left; width: 25%">
                    <div class="am-gallery-item am_list_block">
                        <a href="###" class="am_img_bg">
                            <img src="static/assets/i/01.jpg"/>
                        </a>

                        <div class="am_listimg_info"><span class="am-icon-heart"> 132</span><span
                                class="am-icon-comments"> 67</span><span class="am_imglist_time">15分钟前</span></div>

                    </div>
                    <a class="am_imglist_user"><span class="am_imglist_user_ico"><img src="static/assets/i/kj.png"
                                                                                      alt=""></span><span
                            class="am_imglist_user_font">路见不平Eason吼</span></a>
                </li>

                <li style="float: left; width: 25%">
                    <div class="am-gallery-item am_list_block">
                        <a href="###" class="am_img_bg">
                            <img src="static/assets/i/01.jpg"/>
                        </a>

                        <div class="am_listimg_info"><span class="am-icon-heart"> 132</span><span
                                class="am-icon-comments"> 67</span><span class="am_imglist_time">15分钟前</span></div>

                    </div>
                    <a class="am_imglist_user"><span class="am_imglist_user_ico"><img src="static/assets/i/kj.png"
                                                                                      alt=""></span><span
                            class="am_imglist_user_font">路见不平Eason吼</span></a>
                </li>

                <li style="float: left; width: 25%">
                    <div class="am-gallery-item am_list_block">
                        <a href="###" class="am_img_bg">
                            <img src="static/assets/i/01.jpg"/>
                        </a>

                        <div class="am_listimg_info"><span class="am-icon-heart"> 132</span><span
                                class="am-icon-comments"> 67</span><span class="am_imglist_time">15分钟前</span></div>

                    </div>
                    <a class="am_imglist_user"><span class="am_imglist_user_ico"><img src="static/assets/i/kj.png"
                                                                                      alt=""></span><span
                            class="am_imglist_user_font">路见不平Eason吼</span></a>
                </li>

                <li style="float: left; width: 25%">
                    <div class="am-gallery-item am_list_block">
                        <a href="###" class="am_img_bg">
                            <img src="static/assets/i/01.jpg"/>
                        </a>

                        <div class="am_listimg_info"><span class="am-icon-heart"> 132</span><span
                                class="am-icon-comments"> 67</span><span class="am_imglist_time">15分钟前</span></div>

                    </div>
                    <a class="am_imglist_user"><span class="am_imglist_user_ico"><img src="static/assets/i/kj.png"
                                                                                      alt=""></span><span
                            class="am_imglist_user_font">路见不平Eason吼</span></a>
                </li>

                <li style="float: left; width: 25%">
                    <div class="am-gallery-item am_list_block">
                        <a href="###" class="am_img_bg">
                            <img src="static/assets/i/01.jpg"/>
                        </a>

                        <div class="am_listimg_info"><span class="am-icon-heart"> 132</span><span
                                class="am-icon-comments"> 67</span><span class="am_imglist_time">15分钟前</span></div>

                    </div>
                    <a class="am_imglist_user"><span class="am_imglist_user_ico"><img src="static/assets/i/kj.png"
                                                                                      alt=""></span><span
                            class="am_imglist_user_font">路见不平Eason吼</span></a>
                </li>

                <li style="float: left; width: 25%">
                <div class="am-gallery-item am_list_block">
                    <a href="###" class="am_img_bg">
                        <img src="static/assets/i/01.jpg"/>
                    </a>

                    <div class="am_listimg_info"><span class="am-icon-heart"> 132</span><span
                            class="am-icon-comments"> 67</span><span class="am_imglist_time">15分钟前</span></div>

                </div>
                <a class="am_imglist_user"><span class="am_imglist_user_ico"><img src="static/assets/i/kj.png"
                                                                                  alt=""></span><span
                        class="am_imglist_user_font">路见不平Eason吼</span></a>
            </li>

                <li style="float: left; width: 25%">
                <div class="am-gallery-item am_list_block">
                    <a href="###" class="am_img_bg">
                        <img src="static/assets/i/01.jpg"/>
                    </a>

                    <div class="am_listimg_info"><span class="am-icon-heart"> 132</span><span
                            class="am-icon-comments"> 67</span><span class="am_imglist_time">15分钟前</span></div>

                </div>
                <a class="am_imglist_user"><span class="am_imglist_user_ico"><img src="static/assets/i/kj.png"
                                                                                  alt=""></span><span
                        class="am_imglist_user_font">路见不平Eason吼</span></a>
            </li>
            </ul>
        </div>
    </div>

    <div class="you-like" style="width: 23%; float: right;">
        <div class="s-bar">热门用户
            <a class="i-load-more-item-shadow" href="#"><i class="am-icon-refresh am-icon-fw"></i>更多</a>
        </div>

        <div class="s-content" style="">
            <div class="card-box widget-user">
                <div>
                    <img src="static/assets/i/user.png" class="img-responsive img-circle" alt="user" >
                    <div class="wid-u-info">
                        <h4 class="m-t-0 m-b-5 font-600">Chadengle</h4>
                        <small class="text-custom"><b>网络组主管</b></small>
                    </div>
                </div>
            </div>
        </div>
        <div class="s-content" style="">
            <div class="card-box widget-user">
                <div>
                    <img src="static/assets/i/user02.png" class="img-responsive img-circle" alt="user">
                    <div class="wid-u-info">
                        <h4 class="m-t-0 m-b-5 font-600">Chadengle</h4>
                        <small class="text-warning"><b>管理员</b></small>
                    </div>
                </div>
            </div>
        </div>
        <div class="s-content" style="">
            <div class="card-box widget-user">
                <div>
                    <img src="static/assets/i/user03.png" class="img-responsive img-circle" alt="user">
                    <div class="wid-u-info">
                        <h4 class="m-t-0 m-b-5 font-600">Chadengle</h4>
                        <small class="text-success"><b>设计师</b></small>
                    </div>
                </div>
            </div>
        </div>
        <div class="s-content" style="">
            <div class="card-box widget-user">
                <div>
                    <img src="static/assets/i/index.jpg" class="img-responsive img-circle" alt="user">
                    <div class="wid-u-info">
                        <h4 class="m-t-0 m-b-5 font-600">Chadengle</h4>
                        <small class="text-info"><b>开发者</b></small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="you-like">
        <div class="s-bar">推荐
            <a class="am-badge am-badge-danger am-round">民谣</a>
            <a class="am-badge am-badge-danger am-round">摇滚</a>
            <a class="i-load-more-item-shadow" href="#"><i class="am-icon-refresh am-icon-fw"></i>换一组</a>
        </div>

        <div class="s-content" style="border-top: 1px solid #E8EEF2;">
            <ul data-am-widget="gallery" class="am-gallery am-avg-sm-2 am-avg-lg-4 am-avg-md-3 am-gallery-default">
                <li style="float: left; width: 25%">
                    <div class="am-gallery-item am_list_block">
                        <a href="###" class="am_img_bg">
                            <img src="static/assets/i/01.jpg"/>
                        </a>

                        <div class="am_listimg_info"><span class="am-icon-heart"> 132</span><span
                                class="am-icon-comments"> 67</span><span class="am_imglist_time">15分钟前</span></div>

                    </div>
                    <a class="am_imglist_user"><span class="am_imglist_user_ico"><img src="static/assets/i/kj.png"
                                                                                      alt=""></span><span
                            class="am_imglist_user_font">路见不平Eason吼</span></a>
                </li>

                <li style="float: left; width: 25%">
                    <div class="am-gallery-item am_list_block">
                        <a href="###" class="am_img_bg">
                            <img src="static/assets/i/01.jpg"/>
                        </a>

                        <div class="am_listimg_info"><span class="am-icon-heart"> 132</span><span
                                class="am-icon-comments"> 67</span><span class="am_imglist_time">15分钟前</span></div>

                    </div>
                    <a class="am_imglist_user"><span class="am_imglist_user_ico"><img src="static/assets/i/kj.png"
                                                                                      alt=""></span><span
                            class="am_imglist_user_font">路见不平Eason吼</span></a>
                </li>

                <li style="float: left; width: 25%">
                    <div class="am-gallery-item am_list_block">
                        <a href="###" class="am_img_bg">
                            <img src="static/assets/i/01.jpg"/>
                        </a>

                        <div class="am_listimg_info"><span class="am-icon-heart"> 132</span><span
                                class="am-icon-comments"> 67</span><span class="am_imglist_time">15分钟前</span></div>

                    </div>
                    <a class="am_imglist_user"><span class="am_imglist_user_ico"><img src="static/assets/i/kj.png"
                                                                                      alt=""></span><span
                            class="am_imglist_user_font">路见不平Eason吼</span></a>
                </li>

                <li style="float: left; width: 25%">
                    <div class="am-gallery-item am_list_block">
                        <a href="###" class="am_img_bg">
                            <img src="static/assets/i/01.jpg"/>
                        </a>

                        <div class="am_listimg_info"><span class="am-icon-heart"> 132</span><span
                                class="am-icon-comments"> 67</span><span class="am_imglist_time">15分钟前</span></div>

                    </div>
                    <a class="am_imglist_user"><span class="am_imglist_user_ico"><img src="static/assets/i/kj.png"
                                                                                      alt=""></span><span
                            class="am_imglist_user_font">路见不平Eason吼</span></a>
                </li>

                <li style="float: left; width: 25%">
                    <div class="am-gallery-item am_list_block">
                        <a href="###" class="am_img_bg">
                            <img src="static/assets/i/01.jpg"/>
                        </a>

                        <div class="am_listimg_info"><span class="am-icon-heart"> 132</span><span
                                class="am-icon-comments"> 67</span><span class="am_imglist_time">15分钟前</span></div>

                    </div>
                    <a class="am_imglist_user"><span class="am_imglist_user_ico"><img src="static/assets/i/kj.png"
                                                                                      alt=""></span><span
                            class="am_imglist_user_font">路见不平Eason吼</span></a>
                </li>

                <li style="float: left; width: 25%">
                    <div class="am-gallery-item am_list_block">
                        <a href="###" class="am_img_bg">
                            <img src="static/assets/i/01.jpg"/>
                        </a>

                        <div class="am_listimg_info"><span class="am-icon-heart"> 132</span><span
                                class="am-icon-comments"> 67</span><span class="am_imglist_time">15分钟前</span></div>

                    </div>
                    <a class="am_imglist_user"><span class="am_imglist_user_ico"><img src="static/assets/i/kj.png"
                                                                                      alt=""></span><span
                            class="am_imglist_user_font">路见不平Eason吼</span></a>
                </li>

                <li style="float: left; width: 25%">
                    <div class="am-gallery-item am_list_block">
                        <a href="###" class="am_img_bg">
                            <img src="static/assets/i/01.jpg"/>
                        </a>

                        <div class="am_listimg_info"><span class="am-icon-heart"> 132</span><span
                                class="am-icon-comments"> 67</span><span class="am_imglist_time">15分钟前</span></div>

                    </div>
                    <a class="am_imglist_user"><span class="am_imglist_user_ico"><img src="static/assets/i/kj.png"
                                                                                      alt=""></span><span
                            class="am_imglist_user_font">路见不平Eason吼</span></a>
                </li>

                <li style="float: left; width: 25%">
                    <div class="am-gallery-item am_list_block">
                        <a href="###" class="am_img_bg">
                            <img src="static/assets/i/01.jpg"/>
                        </a>

                        <div class="am_listimg_info"><span class="am-icon-heart"> 132</span><span
                                class="am-icon-comments"> 67</span><span class="am_imglist_time">15分钟前</span></div>

                    </div>
                    <a class="am_imglist_user"><span class="am_imglist_user_ico"><img src="static/assets/i/kj.png"
                                                                                      alt=""></span><span
                            class="am_imglist_user_font">路见不平Eason吼</span></a>
                </li>
            </ul>
        </div>
    </div>
</div>



<script src="static/assets/js/jquery.min.js"></script>
<script src="static/assets/js/amazeui.min.js"></script>
<script src="static/assets/js/index.js"></script>
</body>
</html>